﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Detail.aspx.cs" Inherits="X.WebSite.Product.Detail"
    MasterPageFile="~/Master/Master.Master" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" ID="cph" runat="server">
    <h1>
        <asp:Label ID="lblProductName" runat="server"></asp:Label>
    </h1>
    <table>
        <tr>
            <td valign="top">
                <style type="text/css">
                    .parent-zoom img { -webkit-transition-property: opacity; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease; cursor: cell; cursor: -moz-zoom-in; cursor: -webkit-zoom-in; border: 0; }
                    .zoomy { position: absolute; visibility: hidden; background-repeat: no-repeat; -webkit-box-shadow: 0px 5px 10px #000; -moz-box-shadow: 0px 5px 10px #000; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color='#3333333', Positive='true'); border: 0px solid #333; line-height: 100px; text-align: center; background-color: #fff; z-index: 1000; overflow: hidden; cursor: url(/Images/blank.cur), move; -webkit-transition-property: border-width, border-color, opacity; -webkit-transition-duration: 500ms, 1s, 500ms; -webkit-transition-timing-function: ease; border: 3px solid #fff; }
                    .zoomy span { display: block; margin: 5px auto; background: -moz-linear-gradient(top, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.6)), color-stop(100%,rgba(255,255,255,0))); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#55FFFFFF, endColorstr=#00ffffff); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#55FFFFFF, endColorstr=#00ffffff); }
                    .zoomy a { color: #333; text-decoration: none; outline: 0; }
                    .inactive img { opacity: 0.85 !important; filter: alpha(opacity=85) !important; }
                    .zoomy #tmp { max-width: none !important; max-height: none !important; width: auto !important; height: auto !important; top: -999999px; left: -999999px; }
                </style>
                <div class="zoomybox">
                    <a class="zoom" href="/Upload/<% Response.Write(null != _ProductInfo.Photo? _ProductInfo.Photo[0].ImageName:""); %>"
                        id="azoom">
                        <img src="/Upload/<% Response.Write(null != _ProductInfo.Photo? _ProductInfo.Photo[0].ImageName:""); %>"
                            style="border: 1px solid #000; height: 300px; width: 350px;" alt="" id="imgzoom" /></a></div>
                <script type="text/javascript" src="/Scripts/zoomy.min.js"></script>
                <script type="text/javascript">
                    $(function () {
                        $('.zoom').zoomy('mouseover',
                            {
                                clickable: false
                            }
                        );
                    } (jQuery));

                    function ChangeImage(index) {
                        $('#azoom').attr('href', $('#simg' + index).attr('src').replace('_s', ''));
                        $('#imgzoom').attr('src', $('#simg' + index).attr('src').replace('_s', ''));

                        $('.zoom').unbind();

                        $(function () {
                            $('.zoom').zoomy('mouseover',
                            {
                                clickable: false
                            }
                        );
                        } (jQuery));
                    }
                </script>
                <table>
                    <%
                        if (null != _ProductInfo.Photo)
                        {
                            for (int i = 0; i < _ProductInfo.Photo.Count; i++)
                            {
                                if (0 == i % 5)
                                    Response.Write("<tr>");
                                Response.Write(string.Format("<td><img src=\"/Upload/{0}\" style=\"border:1px solid #000; width:50px; height:50px; cursor:pointer;\" onclick=\"ChangeImage({1});\" id=\"simg{1}\" /></td>", _ProductInfo.Photo[i].ImageNameEx, i));

                                if (i == _ProductInfo.Photo.Count - 1 && 0 != i % 5)
                                {
                                    for (int j = 0; j < 5 - i % 5 - 1; j++)
                                    {
                                        Response.Write("<td style=\"height:50px;text-align:center;width:50px;\"></td>");
                                    }
                                }

                                if (4 == i % 5)
                                    Response.Write("</tr>");
                            }
                        }
                    %>
                </table>
            </td>
            <td valign="top">
                <p>
                    <b>Model :</b><asp:Label ID="lblModel" runat="server"></asp:Label><br />
                    <b>PartNumber :</b><asp:Label ID="lblPartNumber" runat="server"></asp:Label><br />
                    <b>Certificate :</b><asp:Label ID="lblCertificate" runat="server"></asp:Label><br />
                    <b>Color :</b><asp:Label ID="lblColor" runat="server"></asp:Label><br />
                    <b>Guarantee :</b><asp:Label ID="lblGuarantee" runat="server"></asp:Label><br />
                    <b>HRC :</b><asp:Label ID="lblHRC" runat="server"></asp:Label><br />
                    <b>Material :</b><asp:Label ID="lblMaterial" runat="server"></asp:Label><br />
                </p>
            </td>
        </tr>
    </table>
    <b>Description</b>
    <p>
        <asp:Label ID="lblDescription" runat="server"></asp:Label></p>
</asp:Content>
